<template>
  <div :class="{'editor': !readonly}" class="table_datetime" @mouseenter="editVisible = true" @mouseleave.stop="editVisible = false">
    <a-date-picker ref="tableDateTime" :open="!readonly" v-model="newValue" placeholder="" :show-time="showTime" @ok="handleOk" @change="handleChange" @openChange="handleDateChange" :locale="locale">
      <template #suffixIcon>
      </template>
    </a-date-picker>
    <a-icon class="tableDateIcon" type="calendar" v-if="editor" v-show="editVisible && readonly" @click.stop="editorClick"/>
    <!-- <a-icon class="tableDateIcon" type="close-circle" v-if="editor" v-show="!readonly && newValue !== null" @click.prevent="clearClick"/> -->
  </div>
</template>

<script>
import { 
  updateRow
} from "@/api/worksheet";
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import moment from 'moment';
export default {
	props: {
		value: {
			default: ""
		},
		editor: {
			default: true
		},
    rowId: String,
    fieldName: String,
    format: String,
    valueFormat: String,
	},
	data(){
		return{
			editVisible: false,
			readonly: true,
			showTime: true,
			moment,
      newValue: null,
      locale
		}
	},
	methods:{
    editorClick(){
        this.readonly = false
    },
    formatDate(date){
      return moment(date).format(this.computedFormatValue)
    },
    async handleOk(date){
      if(!this.editor)return
      let value = date ? this.formatDate(date) :  date
      await updateRow({worksheetId: this.worksheetId, data: {[this.fieldName]: value}, rowId: this.rowId})
    },
    handleDateChange(status){
      if(!status){
        this.readonly = true
      }
    },
    async handleChange(date){
      if(!this.editor)return
      let value = date ? this.formatDate(date) :  date
      await updateRow({worksheetId: this.worksheetId, data: {[this.fieldName]: value}, rowId: this.rowId})
    }
	},
  computed:{
      worksheetId() {
          return this.$route.params.worksheetId;
      },
      computedFormatValue(){
          return this.valueFormat.replace('dd', 'DD')
      }
  },
  mounted(){
      if(this.value === '' || this.value === null || !this.value){
        this.newValue = null
      } else {
        this.newValue = moment(this.value, this.computedFormatValue)
      }
      this.showTime = this.valueFormat.includes('H')
  }
}

</script>

<style lang="less">
.appPage{
  .table_datetime{
      padding: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;

      .tableDateIcon{
        position: absolute;
        right: 10px;
        z-index: 2050;
      }
      .ant-calendar-picker{
        pointer-events: none;
      }
      input{
        color: #606266 !important;
        border: none !important;
        background-color: transparent;
        width: 95%;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      i{
        cursor: pointer;
        color: #606266;
      }
      i:hover{
        color: #0f8df2;
      }
  }
  .editor{
      border: 2px #0f8df2 solid;
      background-color: white;
  }
}
</style>